<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		 <script src="../../js/vue.min.js"></script>
	</head>
	<body>
		
		<!-- 
		v-model
		作用：在表单元素上创建双向数据绑定
		说明：监听用户的输入事件以更新数据
		计算属性computed和侦听器wantch -->
		<!--computed用来监控自己定义的变量，该变量不在data里面声明，直接在computed里面定义，然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理；
			computed比较适合对多个变量或者对象进行处理后返回一个结果值，
			也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化，
			举例：购物车里面的商品列表和总金额之间的关系，
			只要商品列表里面的商品数量发生变化，或减少或增多或删除商品，
			总金额都应该发生变化。这里的这个总金额使用
			computed属性来进行计算是最好的选择
			
			watch主要用于监控vue实例的变化，它监控的变量当然必须在data里面声明才可以，它可以监控一个变量，也可以是一个对象
			--> 
				 
				 
		<div id="root">
		 
		姓:<input v-model="firstname" />
		 
		名:<input v-model="lastname"/>
		 
		<div>
		 
		全名:<input v-model="fullname"/>
		 
		</div>
		 
		<div> {{count}} </div>
		 
		</div>
		 
		<script>
		 
		new Vue({
		 
		el:"#root",
		data:{
		firstname:"",
		lastname:"",
		count:0,
		},
		 
		
			
		computed:{
		fullname:function(){
		return this.firstname+' '+this.lastname
		}
		},
		 
		//监听器
		 
		watch:{
		fullname:function(){
		this.count++
		},
		},
		
		})
		</script>

	</body>
</html>



<!--
computed是在HTML DOM加载后马上执行的，如赋值；
而methods则必须要有一定的触发条件才能执行，如点击事件；
watch呢？它用于观察Vue实例上的数据变动。对应一个对象，键是观察表达式，值是对应回调。值也可以是方法名，或者是对象，包含选项。
执行顺序为：默认加载的时候先computed再watch，不执行methods；等触发某一事件后，则是：先methods再watch。
-->